/**
 * box 最外侧容器
 * left 左侧容器
 * right 右侧容器
 * resize 可拖到的位置
 */
function dragControllerLR() {
	let resize = document.getElementsByClassName('resize')
	let left = document.getElementsByClassName('left')
	let right = document.getElementsByClassName('right')
	/*let box = document.getElementsByClassName('box')*/

	for (let i = 0; i < resize.length; i++) {
		// 鼠标按下事件
		resize[i].style.cursor= "w-resize";
		let curBox = resize[i].parentNode;
		resize[i].onmousedown = function(e) {
			//颜色改变提醒
			resize[i].style.background = '#818181'
			let startX = e.clientX
			resize[i].left = resize[i].offsetLeft
			// 鼠标拖动事件
			document.onmousemove = function(e) {
				let endX = e.clientX;
				let moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
				let maxT = curBox.clientWidth - resize[i].offsetWidth;// 容器宽度 - 左边区域的宽度 = 右边区域的宽度

				if (moveLen < 50) {
					moveLen = 50;
				} // 左边区域的最小宽度为50px

				if (moveLen > maxT - 150) {
					moveLen = maxT - 150;
				} //右边区域最小宽度为150px

				resize[i].style.left = moveLen; // 设置左侧区域的宽度

				for (let j = 0; j < left.length; j++) {
					if(i==j){
						left[j].style.width = moveLen + 'px'
						let leftwidth = (moveLen+2)+'px';
						right[j].style.width = 'calc(100%'+' - '+leftwidth+')' ;
					}
				}
			}
			// 鼠标松开事件
			// eslint-disable-next-line no-unused-vars
			document.onmouseup = function(evt) {
				//颜色恢复
				resize[i].style.background = '#d6d6d6'
				document.onmousemove = null
				document.onmouseup = null
				resize[i].releaseCapture && resize[i].releaseCapture() ;
				//当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
			}
			resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
			return false
		}
	}
}


// 上下拖动事件
function dragControllerUD() {
	let resize = document.getElementsByClassName('move')
	let topBox = document.getElementsByClassName('topBox')
	let downBox = document.getElementsByClassName('downBox')
	/*let box = document.getElementsByClassName('box')*/
	for (let i = 0; i < resize.length; i++) {
		// 鼠标按下事件
		let curBox = resize[i].parentNode;
		resize[i].style.cursor= "n-resize";
		resize[i].onmousedown = function(e) {
			//颜色改变提醒
			resize[i].style.background = '#818181'
			let startY = e.clientY
			resize[i].top = resize[i].offsetTop
			// 鼠标拖动事件
			document.onmousemove = function(e) {
				let endY = e.clientY
				let moveLen = resize[i].top + (endY -
					startY) // （endY - startY）=移动的距离。resize[i].top+移动的距离=上边区域最后的高度
				let maxT = curBox.clientHeight - resize[i]
					.offsetHeight // 容器高度 - 上边区域的高度 = 下边区域的高度

				if (moveLen < 40) moveLen = 40 // 上边区域的最小高度为40px
				if (moveLen > maxT - 40) moveLen = maxT - 40 //下边区域最小高度为150px

				resize[i].style.top = moveLen // 设置上边区域的高度

				for (let j = 0; j < topBox.length; j++) {
					if(i==j){
						topBox[j].style.height = moveLen + 'px'
						/*downBox[j].style.height = box[i].clientHeight - moveLen - 5 + 'px'*/
						let topheight = (moveLen+2)+'px';
						downBox[j].style.height = 'calc(100%'+' - '+topheight+')' ;
					}

				}
			}
			// 鼠标松开事件
			document.onmouseup = function() {
				//颜色恢复
				resize[i].style.background = '#d6d6d6'
				document.onmousemove = null
				document.onmouseup = null
				resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
			}
			resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
			return false
		}
	}
}
